<template>
  <el-card shadow="never">
    <div slot="header" class="clearfix">
      <span>需求信息</span>
    </div>
    <el-descriptions border :column="4" :size="size" id="demanddesc">
      <el-descriptions-item label="需求编号" label-class-name="mylabel">{{ demandForm.sn }}</el-descriptions-item>
      <el-descriptions-item label="创建人" label-class-name="mylabel">{{ demandForm.head }}</el-descriptions-item>
      <el-descriptions-item label="需求类型" label-class-name="mylabel">{{ demandForm.demandType }}</el-descriptions-item>
      <el-descriptions-item label="客户全称" label-class-name="mylabel">{{ demandForm.companyName }}</el-descriptions-item>
      <el-descriptions-item label="需求描述" :span="4" label-class-name="mylabel">{{
          demandForm.demandDes
        }}
      </el-descriptions-item>
      <el-descriptions-item label="附件" label-class-name="mylabel" :span="4">暂无附件</el-descriptions-item>
      <el-descriptions-item label="协作人" label-class-name="mylabel" :span="4">
        <el-table :data="demandForm.supporter" header-cell-class-name="mytable">
          <el-table-column type="index"></el-table-column>
          <el-table-column prop="supporter"></el-table-column>
          <el-table-column prop="supporterType"></el-table-column>
          <el-table-column prop="supporterContent"></el-table-column>
        </el-table>
      </el-descriptions-item>
    </el-descriptions>
    <el-form id="recordform">
      <el-form-item label="沟通记录">
        <el-radio-group v-model="reverse">
          <el-radio :label="true">倒序</el-radio>
          <el-radio :label="false">正序</el-radio>
        </el-radio-group>
        <el-timeline style="width: 100%" :reverse="reverse">
          <el-timeline-item v-for="item in contactData" :key="item.id" :timestamp="item.contactTime"
                            placement="top" :color="color">
            <el-descriptions :column="3" border :title="item.subject">
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-tickets"></i>沟通方式
                </template>
                {{ item.contactMethod }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label"><i class="el-icon-user"></i>对方联系人</template>
                {{ item.contactor }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label"><i class="el-icon-user"></i>我方联系人</template>
                {{ item.userName }}
              </el-descriptions-item>
              <el-descriptions-item :span="3">
                <template slot="label"><i class="el-icon-chat-dot-square"></i>沟通纪要</template>
                <el-table :data="item.recordSummaries" size="mini">
                  <el-table-column type="index"></el-table-column>
                  <el-table-column prop="recordSummary"></el-table-column>
                </el-table>
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label"><i class="el-icon-user"></i>附件</template>
                {{ item.recordAttachment }}
              </el-descriptions-item>
            </el-descriptions>
          </el-timeline-item>
        </el-timeline>
      </el-form-item>
      <br>
      <el-form-item>
        <el-button type="text" @click="descriptionsVisible=true">新增沟通记录</el-button>
      </el-form-item>
    </el-form>
    <el-descriptions v-if="descriptionsVisible" :column="3" border :size="size"
                     style="margin-bottom: 20px" id="recorddesc">
      <el-descriptions-item span="3" label-class-name="mylabel">
        <template slot="label">
          <i class="el-icon-subject"></i>
          沟通主题
        </template>
        <el-input v-model="record.subject" size="mini"></el-input>
      </el-descriptions-item>
      <el-descriptions-item label-class-name="mylabel">
        <template slot="label">
          <i class="el-icon-user"></i>
          沟通时间
        </template>
        <el-date-picker style="width: 100%" :size="size"
                        v-model="record.contactTime"
                        type="datetime"
                        placeholder="选择日期时间">
        </el-date-picker>
      </el-descriptions-item>
      <el-descriptions-item label-class-name="mylabel">
        <template slot="label">
          <i class="el-icon-tickets"></i>
          沟通方式
        </template>
        <el-dropdown :hide-on-click="false" @command="handleCommand" style="width: 150px" :size="size">
  <span class="el-dropdown-link">
    {{ record.contactMethod }}<i class="el-icon-arrow-down el-icon--right"></i>
  </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="visit">现场拜访</el-dropdown-item>
            <el-dropdown-item command="phone">电话沟通</el-dropdown-item>
            <el-dropdown-item command="video">视频会议</el-dropdown-item>
            <el-dropdown-item command="email">电子邮件</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-descriptions-item>
      <el-descriptions-item label-class-name="mylabel">
        <template slot="label">
          <i class="el-icon-user"></i>
          对方联系人
        </template>
        <el-input v-model="record.contactor"></el-input>
      </el-descriptions-item>
      <el-descriptions-item span="3" label-class-name="mylabel">
        <template slot="label">
          <i class="el-icon-chat-dot-square"></i>
          沟通纪要
        </template>
        <el-table :data="record.recordSummaries" style="width: 100%" :size="size">
          <el-table-column type="index" label="编号"></el-table-column>
          <el-table-column label="沟通纪要">
            <template slot-scope="scope">
              <el-input v-model="scope.row.recordSummary" placeholder="请输入内容"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button @click="notice()" slot="append" type="text" size="small"><i class="el-icon-alarm-clock
" style="width: 50px"></i></el-button>
              <el-button @click="addRecordItem(scope.$index)" type="text" size="small">
                <i class="el-icon-plus"></i>
              </el-button>
              <el-button @click="deleteRecordItem(scope.$index)" type="text" size="small"
                         v-if="record.recordSummaries.length > 1">
                <i class="el-icon-minus"></i>
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-descriptions-item>
      <el-descriptions-item span="3">
        <template slot="label">
          文件审批
        </template>
        <el-radio-group v-model="checkList">
          <el-radio label="合同"></el-radio>
          <el-radio label="技术协议"></el-radio>
          <el-radio label="其他文件"></el-radio>
        </el-radio-group>

      </el-descriptions-item>
      <el-descriptions-item span="3" v-if="checkList=='合同'">
        <template slot="label">
          审批进度
        </template>
        <el-upload
            class="upload-demo"
            action="https://localhost:8080/file/upload/"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            multiple
            :limit="3"
            :on-exceed="handleExceed"
            :on-success="handleSuccess"
            :file-list="fileList">
          <el-button size="small" type="text">合同上传</el-button>
        </el-upload>
        <el-steps :active="1" finish-status="success" simple>
          <el-step title="申请人" description="刘波"></el-step>
          <el-step title="部门经理" description="王豪"></el-step>
          <el-step title="设备部" description="崔瑾"></el-step>
          <el-step title="财务部" description="邴丽娜"></el-step>
          <el-step title="总经理" description="孟强"></el-step>
          <el-step title="完成" description="刘波"></el-step>
        </el-steps>
        <el-button @click="file()" size="mini">文件审批</el-button>
      </el-descriptions-item>
      <el-descriptions-item span="3" v-if="checkList=='技术协议'">
        <template slot="label">
          审批进度
        </template>
        <el-upload
            class="upload-demo"
            action="https://localhost:8080/file/upload/"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            multiple
            :limit="3"
            :on-exceed="handleExceed"
            :file-list="fileList">
          <el-button size="small" type="text">技术协议上传</el-button>
        </el-upload>
        <el-steps :active="1" finish-status="success" simple>
          <el-step title="申请人" description="刘波"></el-step>
          <el-step title="部门经理" description="王豪"></el-step>
          <el-step title="设备部" description="崔瑾"></el-step>
          <el-step title="总经理" description="孟强"></el-step>
          <el-step title="完成" description="刘波"></el-step>
        </el-steps>
        <el-button @click="file()" size="mini">文件审批</el-button>
      </el-descriptions-item>
      <el-descriptions-item span="3" v-if="checkList=='其他文件'">
        <template slot="label">
          审批进度
        </template>
        <el-upload
            class="upload-demo"
            action="https://localhost:8080/file/upload/"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            multiple
            :limit="3"
            :on-exceed="handleExceed"
            :file-list="fileList">
          <el-button size="small" type="text">补充协议上传</el-button>
        </el-upload>
        <el-steps :active="1" finish-status="success" simple>
          <el-step title="申请人" description="刘波"></el-step>
          <el-step title="部门经理" description="王豪"></el-step>
          <el-step title="设备部" description="崔瑾"></el-step>
          <el-step title="财务部" description="邴丽娜"></el-step>
          <el-step title="总经理" description="孟强"></el-step>
          <el-step title="完成" description="刘波"></el-step>
        </el-steps>
        <el-button @click="file()" size="mini">文件审批</el-button>
      </el-descriptions-item>
      <el-descriptions-item>
        <el-button @click="submitRecord()" type="text">确定</el-button>
        <el-button @click="descriptionsVisible=false" type="text">取消</el-button>
      </el-descriptions-item>
    </el-descriptions>
    <el-button type="primary" @click="approval()" size="mini">申请立项</el-button>
  </el-card>
</template>

<script>
export default {
  name: "HistoryDemand",
  data() {
    return {
      size: 'mini',
      descriptionsVisible: true,
      reverse: true,
      color: 'pink',
      checkList: [],
      fileList: [],
      planRadio: '2',
      demandForm: {
        companyName: '',
        sn: '',
        head: '',
        demandType: '',
        demandDes: '',
        demandAttarch: '',
        supporter: [{
          supporter: '',
          supporterType: '',
          supporterContent: ''
        }]
      },
      contactData: [
        {
          subject: '',
          contactor: '',
          contactTime: '',
          contactMethod: '',
          userName: '',
          recordAttachment: '',
          recordSummaries: [
            {
              recordSummary: ''
            }
          ]
        }
      ],
      record: {
        demandId: '',
        companyName: '',
        contactor: '',
        contactTime: '',
        contactMethod: '',
        subject: '',
        recordAttachment: '',
        recordSummaries: [{recordSummary: ''}]
      },
      recordPlan: [],
      radioFileType: '1',
      methodsLabel: '请选择'
    }
  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    handleSuccess(response, file, fileList) {
      // 这里的 response 是服务器返回的数据
      // file 是刚刚上传成功的文件信息
      // fileList 是当前的文件列表
      switch (this.checkList) {
        case '合同':
          this.record.recordAttachment = fileList; // 或者根据需要处理fileList
          break;
        case '技术协议':
          this.record.recordAttachment = fileList;
          break;
        case '其他文件':
          this.record.recordAttachment = fileList;
          break;
      }
    },
    approval() {
      const demandDto = this.demandForm
      this.$http.post("/demand/startProcess/", demandDto)
          .then((response) => {
            if (response.data.code == 1) {
              alert("立项申请完毕")
            } else {
              alert("立项申请失败")
            }
          })
      this.$router.push('project_aproval')
    },
    handleCommand(command) {
      const labels = {
        visit: '现场拜访',
        phone: '电话沟通',
        video: '视频会议',
        email: '电子邮件',
      };
      this.record.contactMethod = labels[command] || '请选择';
    },
    //沟通记录新增函数
    submitRecord() {
      this.record.demandId = this.demandForm.sn
      this.$http.post("/record/add", this.record)
          .then((response) => {
            if (response.data.code == 1) {
              console.log(response.data.data)
              alert("增加成功")
            } else {
              alert("增加沟通记录失败")
            }
          })
    },
    notice() {
      alert("已增加提醒")
    },

    addRecordItem() {
      this.record.recordSummaries.push({recordSummary: ''})
    },
    deleteRecordItem(index) {
      if (this.record.recordSummaries.length != 1)
        this.record.recordSummaries.splice(index, 1)
      else alert("至少需要保留一个沟通纪要吧~~")
    },
    addPlanItem() {
      const newItemRow = {planSn: '', planContent: '', planTime: ''};
      this.addPlanTable.push(newItemRow);
    },
    deletePlanItem() {
      if (this.addPlanTable.length != 1)
        this.addPlanTable.pop()
    }
  },
  /**
   * 接收guestInfo组件传递过来的需求编号参数sn,公司名称参数companyName
   * 根据需求编号使用钩子函数加载对应需求的沟通记录，显示到时间轴组件中
   */
  mounted() {
    const demandSn = this.$route.query.sn
    this.record.companyName = this.$route.query.companyName
    const username = localStorage.getItem('username') || '未登录用户';
    this.record.userName = username;
    this.$http.get("/record/" + demandSn).then((response) => {
      if (response.data.code === 1) {
        this.contactData = response.data.data
        console.log(this.contactData) // 注意这里的修改
      } else {
        alert("获取沟通记录失败") // 注意这里的修改
      }
    })
    this.$http.get("/demand/" + demandSn).then((response) => {
      if (response.data.code == 1) {
        this.demandForm = response.data.data
        console.log(this.demandForm)
      } else {
        alert("获取+'demandId'+需求信息失败")
      }
    })
  }
}
</script>

<style scoped>
.el-form {
  margin-top: 20px;
}

::v-deep .mylabel {
  width: 120px;
}

::v-deep .mytable {
  display: none;
}

.el-steps {
  margin: 15px 0;
}
</style>